<template>
    <div class="shopping" >
        <ul class="cd_list" >
          <li class="cd_one" v-for="(item,index) in this.goodLists1" :key="index" >
                        <router-link  :to="'/shopDetailed/' + item.goods_id">
                          <div class="commodity">
                            <div class="cd_img_div">
                              <img
                                  :src="item.goods_big_logo"
                                  alt=""
                                  class="cd_img"
                                  @error="handleImageError"
                              />
                            </div>
                            <div class="cd_text">
                              {{item.goods_name}}
                            </div>
                            <div class="cd_money">
                              <i class="iconfont icon-qian"></i>{{item.goods_price}}
                            </div>
                            <div class="cd_address">
                              <i class="iconfont icon-dizhi" title="发货地址"></i>广东
                            </div>
                          </div>
                        </router-link>
                      </li>
        </ul>
    </div>
</template>
<script>
  import axios from 'axios'
  import {mapState} from "vuex";
export default {
    name: "ShOpping",
    data() {
      return {
        //节流阀
        isLoading: false,
        queryObj:{
          // 查询关键词
          query: '',
          // 商品分类Id
          cid: "927",
          // 页码值
          pagenum: 1,
          // 每页显示多少条数据
          pagesize: 20
        },
      //  商品的列表
        goodLists:[]
      }
    },
  computed: {
    // 映射 state 中的数组到组件的计算属性
    ...mapState([
      'goodLists1'
    ])
  },
    props: {
      msg: String,
    },
  mounted() {
    this.getGoodThings();
    window.addEventListener('scroll', this.handleScroll);
  },

  methods:{
    handleScroll() {
      // 获取特定位置的滚动阈值
      const threshold = 700; // 将此值调整为您期望触发函数的滚动位置
      // 获取当前滚动位置
      const currentScroll = window.pageYOffset;
      // 判断当前滚动位置是否达到阈值
      if (currentScroll >= threshold) {
        // 触发您想要执行的函数
        this.loadMoreData();
      }
    },
    //  图片加载不出来的默认值
    handleImageError(event) {
      event.target.src =
          "http://img.moehot.com/img/2018/04/28/0006/W6YZE5Y7Q844KJ58B3QGBJZ4R.jpg_249x249";
    },
    async loadMoreData() {
      let newItems = []; // 存储新数据的数组
      this.isLoading = true;
      this.queryObj.pagenum+=1;
      try {

        const response = await axios.get("https://api-hmugo-web.itheima.net/api/public/v1/goods/search", {
          params: this.queryObj
        });
        // 获取商品的链接
        newItems = response.data.message.goods;
        this.goodLists = this.goodLists.concat(newItems);
        this.isLoading = false;
      } catch (error) {
        console.error(error);
      }
    },
    async getGoodThings() {
      try {
        const response = await axios.get("https://api-hmugo-web.itheima.net/api/public/v1/goods/search", {
          params: this.queryObj
        });
        // 获取商品的链接
        this.goodLists = response.data.message.goods;
        // this.data = response.data;
        // console.log(this.goodLists);
      } catch (error) {
        console.error(error);
      }
    },
    }
  };

</script>
